<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#div{
			width:400px;
			height: 400px;
			border-radius: 50%;
			background-color: pink;
		}
		

		#input{
			width:400px;
			height:50px;
			border:5px solid grey;
			color:#000;
		}

	</style>
</head>
<body>
<div onmouseover="mOver()" onmouseout="mOut()" id="div"></div>
<input  onfocus="getFocus()" onblur="loseFocus(this)" id="input" onchange="getChange(this)" onselect="textSelect(this)">

<script type="text/javascript">

var box=document.getElementById("div");

function mOver(){

	box.style.backgroundColor="orange";

}

function mOut(){
	box.style.backgroundColor="pink";
}

var box2=document.getElementById("input");
function getFocus(){
	
	box2.style.borderColor="red";
	box2.style.color="black";
}

function loseFocus(obj){
	obj.style.borderColor="purple";
}


function getChange(obj){
	obj.style.color="red";
}

function textSelect(obj){
	obj.style.color="blue";
}
</script>

</body>
</html>